<template>
	<view class="weight">
		<view class="weight-header">
			<view class="time">
				<image src="/static/index/left.png" @click="back"></image>
				{{titleTime}}
			</view>
			<view class="bar"  >
				<view :style="{backgroundColor:dayBgColor}" @click="toDay">
					<text>日</text>
				</view>
				<view :style="{backgroundColor:weekBgColor}" @click="toWeek">
					<text>统计</text>
				</view>
			</view>
		</view>
		<view class="weight-content">
			<WeightDayVue v-if="ispage===1"></WeightDayVue>
			<WeightTotalVue v-if="ispage===2"></WeightTotalVue>
		</view>
	</view>
</template>

<script setup>
	import {onMounted, reactive, ref} from 'vue';
	import WeightDayVue from './components/WeightDay.vue';
	import WeightTotalVue from './components/WeightTotal.vue';
	const ispage=ref(1);
	const dayBgColor=ref('#699CEF');
	const weekBgColor=ref(' ');
	const weightTime=reactive(["2024年4月1日","2024年5月3日","2025年2月4日"]);
	const titleTime=ref(weightTime[0]);
	//跳转weightDay页面方法
	function toDay(){
	    // 添加背景色
		dayBgColor.value='#699CEF';
		weekBgColor.value=' ';
		//显示页面
		ispage.value=1;
		//修改顶部时间
		titleTime.value=weightTime[0];
		
		
	}
	//跳转weightweek页面方法
	function toWeek(){
	    //添加背景色
		dayBgColor.value=' ';
		weekBgColor.value='#699CEF';
		//显示页面
		ispage.value=1;
		ispage.value=2;
		//修改顶部时间
		titleTime.value=weightTime[0]+"至"+weightTime[weightTime.length-1];
		
	}
	//返回上一级页面
	function back(){
		uni.navigateBack({
			delta:1
		});
	}
	
</script>

<style scoped>
	.weight-header{
		padding: 60rpx 10rpx;
		width:100%;
		height:100rpx;
		background-color:#aac8ff;
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: center;
		position: fixed;
		top: 0rpx;
		left: 0rpx;
		z-index:1000;
	}
	.time{
		width: 100%;
		text-align: center;
		font-size:24rpx;
		font-weight: bold;
		margin-top: 20rpx;
	}
	.time image {
		position: fixed;
		top: 50rpx;
		left: 30rpx;
		width: 60rpx;
		height: 60rpx;
	}
	.bar{
		width:80%;
		height:70rpx;
		margin-top: 20rpx;
		display:flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-evenly;
	    text-align: center;
		border-radius:15rpx;
		background-color: #aac8ff;
		/* align-items: center; */
	}
	.bar view{
		line-height:70rpx;
		width:50%;
		height:70rpx;
		border-radius: 15rpx;
	}
</style>